<template>
    <div>
        <!--导航条-->
        <div id="Tabbar">
            <span id="span" @click="backClick">
                <span class="fa fa-angle-left"></span>
                <span>首页</span>
            </span>
            <span>个人中心</span>
        </div>
        <div id="user">
            <div id="user-flex">
                <div>
                    <img src="static/avater.jpg" alt="">
                </div>
                <div id="user-content">
                    <p>{{username}}</p>
                    <p>茶人，您已消费0元</p>
                </div>
            </div>
        </div>
        <div id="user-div">
            <div>
                <p>0.00</p>
                <p>账户余额</p>
            </div>
            <div>
                <p>0</p>
                <p>积分余额</p>
            </div>
            <div>
                <p>5</p>
                <p>红包个数</p>
            </div>
        </div>

        <div class="bgc"></div>
        <div>
            <div id="user-dingdan">
                <div>
                    <img src="static/dingdan.png" alt="">
                    <span>我的订单</span>
                </div>
                <div>
                    <span>查看全部订单</span>
                    <span class="fa fa-angle-right right"></span>
                </div>
            </div>
            <div id="user-dingdan2">
                <div>
                    <img src="static/1.png" alt="">
                    <p>待付款</p>
                </div>
                <div>
                    <img src="static/2.png" alt="">
                    <p>待发货</p>
                </div>
                <div>
                    <img src="static/3.png" alt="">
                    <p>待收货</p>
                </div>
                <div>
                    <img src="static/4.png" alt="">
                    <p>待评价</p>
                </div>
            </div>
        </div>
        <div class="bgc"></div>

        <div class="bottom">
            <div>
                <img src="static/2.1.png" alt="">
                <span>我的特权</span>
            </div>
            <div>
                <span class="fa fa-angle-right right"></span>
            </div>
        </div>
        <div class="bottom">
            <div>
                <img src="static/2.2.png" alt="">
                <span>地址管理</span>
            </div>
            <div>
                <span class="fa fa-angle-right right"></span>
            </div>
        </div>
        <div class="bottom">
            <div>
                <img src="static/2.4.png" alt="">
                <span>绑定手机</span>
            </div>
            <div>
                <span class="fa fa-angle-right right"></span>
            </div>
        </div>
        <div class="bottom">
            <div>
                <img src="static/2.3.png" alt="">
                <span>修改密码</span>
            </div>
            <div>
                <span class="fa fa-angle-right right"></span>
            </div>
        </div>
        <div>
            <button @click="exit">退出登录</button>
        </div>
    </div>
</template>

<script>
    
export default {
    data:function(){
        return{
            username:null,
        }
    },
    methods:{
        backClick:function(){
            location.hash="/"
        },
        exit:function(){
            this.$store.dispatch("tuichu");
            this.layer.msg("退出成功");
        },
        
    },
    computed:{
       
    },
    mounted:function(){
        
        var data = JSON.parse(sessionStorage.userInfo);
        this.username = data.username;
    
    },
}
</script>

<style scoped>
    .bgc{
        width: 100%;
        height: 0.5vh;
        background-color: #EEEEE0;
    }
    img{

        width: 10vh;
        height: 10vh;
        border-radius: 50%;
    }
    #Tabbar{
        height: 8vh;
        width: 100vw;
        background-color: black;
        color: white;
        font-size: 4.5vw;  
    }
    #Tabbar #span{
        line-height: 8vh;
        margin-left: 5vw;
        margin-right: 25vw;
    }
    #user{
        height: 16vh;
        background-color: #eeeed1;
        padding-top: 3vh;
        padding-left: 3vw;
    }
    #user-flex{
        display: flex;
    }
    #user-content p{
        margin: 0;
        color: grey;
        margin-left: 3vw;
        margin-top: 1vh;
        font-size: 4vw;
    }
    #user-div{
        padding-top: 1vh;
        width: 100vw;
        display: flex;
        border-bottom: solid 1px #e8e8e8;
    }
    #user-div div{
        width: 33.3vw;
        height: 10vh;
       
    }
    #user-div div p{
        margin: 0;
        text-align: center;
        font-size: 4vw;
    }
    /*#user-div div:after{
        content: "|";
        height: 2vh;
        width: 1vw;
        background-color: red;
        z-index: 100;
        
    }*/
    #user-dingdan{
        display: flex;
        justify-content: space-between;
        height: 10vh;
        line-height: 10vh;
        font-size: 4vw;
        padding-right: 8vw;
        border-bottom: solid 1px #e8e8e8;
    
    }
    #user-dingdan img{
        width: 4.5vh;
        height: 4.5vh;
        position: relative;
        top: 1vh;
        left: 2vw;
    }
    #user-dingdan span{
        position: relative;
        left: 3vw;
    }
    #user-dingdan .right{
        position: relative;
        left: 5vw;
        top: 0.2vh;
        font-size: 4vh;
    }
    #user-dingdan2{
        margin-top: 2vh;
        display: flex;
        justify-content: space-around;
        padding-bottom: 1vh;
    }
    #user-dingdan2 img{
        width: 4vh;
        height: 4vh;
        border-radius: 0;
        position: relative;
        left: 2vw;
        
    }
    #user-dingdan2 p{
        margin: 0;
        font-size: 4vw;
    }
    .bottom{

        display: flex;
        justify-content: space-between;
        padding-top: 2vh;
        padding-left: 2vw;
        padding-right: 5vw;
        padding-bottom: 1vh;
        border-bottom: solid 1px #e8e8e8;
    }
    .bottom img{
        height: 4vh;
        width: 4vh;
        position: relative;
        top: 1vh;
    }

    .bottom span{
        font-size: 4vw;
        position: relative;
    }
    .bottom .right{
        margin-top: 1vh;
        font-size: 4vh;
    }
    button{
        font-size:4.5vw;
        color: grey;
        border: none;
        width: 100vw;
        height: 7.5vh;
        background-color: #eeeed1;
    }
</style>